import React from 'react';
// import { Link } from 'react-router-dom';
import { Select, DatePicker, Input } from 'antd';
import axios from 'axios';
import { apiPrefix } from '../../../shared/api';
import './index.less';

const { Option } = Select;
// const dateFormat = 'YYYY/MM/DD';

export default class Attendance extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      attendance: [],
      project: [],
      queryMessage: {},
    };
  }
  componentDidMount() {
    const api = `${apiPrefix}api/v1/unirole/projects`;
    axios.get(api)
      .then((response) => {
        this.setState({ project: response.data.data });
        console.log(this.state.project);
      });
  }
  query=() => {
    const api = `${apiPrefix}wdy_wage/api/v1/wage/wage_query`;
    axios.post(api, this.state.queryMessage)
      .then((response) => {
        this.setState({ attendance: response.data.data });
      });
  }
  handlOnChange=(value, key) => {
    const { queryMessage } = this.state;
    queryMessage[key] = value;
    this.setState({ queryMessage: { ...this.state.queryMessage } });
    console.log(queryMessage);
  }
  clear=() => {

  }
  render() {
    const { attendance, project } = this.state;
    console.log(attendance);
    return (
      <div className="content">
        <div>
          <h3>工资报表</h3>
          <section style={{
            padding: 20,
            textAlign: 'center',
            overflow: 'hidden'
            }}
          >
            <span style={{ marginLeft: 40 }}> 项目部</span>
            <Select
              style={{ width: 200, marginLeft: 20 }}
              showSearch
              className="select"
              placeholder="请选择项目部"
              onChange={value => this.handlOnChange(value, 'period_id')}
              optionFilterProp="children"
              filterOption={(input, option) =>
              option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
              }
            >
              {
              project.map((value, index) => (
                <Option value={value.id} key={index}>{value.name}</Option>
                ))
            }
            </Select>
            <span style={{ marginLeft: 40 }}>时间</span>
            <DatePicker
              placeholder="时间"
              style={{ marginLeft: 20, width: 200 }}
              onChange={(date, dateString) => this.handlOnChange(dateString, 'first_mfd_date_start')}
            />
            <span style={{ marginLeft: 40 }}>员工编号</span>
            <Input
              placeholder="员工编号"
              style={{ width: 200, marginLeft: 20 }}
              onChange={e => this.handlOnChange(e.target.value, 'user_erp_id')}
            />
            <div style={{ float: 'right', margin: 20 }}>
              <button className="queryButton" onClick={this.query}>查询</button>
              <button className="clearButton" onClick={this.clear}>清空查询列表</button>
              <button className="excelButton">导出Excel</button>
              <button className="addButton">新增</button>
            </div>
          </section>
          <section style={{
            width: '100%',
            overflow: 'auto'
          }}
          >
            <table>
              <thead>
                <tr>
                  <th rowSpan="2" className="w50">序号</th>
                  <th rowSpan="2" className="w120">时间</th>
                  <th rowSpan="2" className="w200">所在工程名称</th>
                  <th rowSpan="2" className="w120">姓名</th>
                  <th rowSpan="2" className="w120">员工编号</th>
                  <th rowSpan="2" className="w120">现场岗位</th>
                  <th rowSpan="2" className="w120">工资档位名称</th>
                  <th rowSpan="2" className="w120">本月出勤天数</th>
                  <th colSpan="7">应发工资</th>
                  <th colSpan="3">扣除数(减,社保)</th>
                  <th rowSpan="2" className="w120">扣除罚款</th>
                  <th rowSpan="2" className="w120">个人所得税</th>
                  <th rowSpan="2" className="w120">扣款合计</th>
                  <th rowSpan="2" className="w120">实发工资(应发工资-社保-税)</th>
                  <th rowSpan="2" className="w120">备注</th>
                </tr>
                <tr>
                  <th className="w120">岗位工资</th>
                  <th className="w120">双休日加班工资</th>
                  <th className="w120">日常加班工资</th>
                  <th className="w120">节假日加班工资</th>
                  <th className="w120">补贴</th>
                  <th className="w120">烤火(防暑降温)</th>
                  <th className="w120">应发工资</th>
                  <th className="w120">基本养老保险</th>
                  <th className="w120">基本医疗保险</th>
                  <th className="w120">失业保险</th>
                </tr>
              </thead>
              <tbody>
                {
                  attendance.map((value, index) => (
                    <tr key={index}>
                      <td>{index + 1}</td>
                      <td>{value.wage.wage_time}</td>
                      <td>{value.project.name}</td>
                      <td>{value.user.name}</td>
                      <td>{value.user.username}</td>
                      <td>{value.job.name}</td>
                      <td>{value.wage.gear_str}</td>
                      <td>{value.wage.work_days}</td>
                      <td>{value.wage.job_salary}</td>
                      <td>{value.wage.usual}</td>
                      <td>{value.wage.weekend_work}</td>
                      <td>{value.wage.holiday_work}</td>
                      <td>{value.wage.subsidy}</td>
                      <td>{value.wage.subsidy_out}</td>
                      <td>{Number(value.wage.subsidy_out
                        + value.wage.subsidy
                        + value.wage.holiday_work
                        + value.wage.weekend_work
                        + value.wage.usual
                        + value.wage.job_salary).toFixed(2)
                        }
                      </td>
                      <td>{value.wage.pension}</td>
                      <td>{value.wage.medical}</td>
                      <td>{value.wage.tax}</td>
                      <td>{value.wage.punish}</td>
                      <td>{value.wage.tax}</td>
                      <td>{
                        value.wage.pension
                        + value.wage.medical
                        + value.wage.tax
                        + value.wage.punish
                        }
                      </td>
                      <td>
                        {Number(value.wage.subsidy_out
                          + value.wage.subsidy
                          + value.wage.holiday_work
                          + value.wage.weekend_work
                          + value.wage.usual
                          + value.wage.job_salary).toFixed(2)
                          - (value.wage.pension
                        + value.wage.medical
                        + value.wage.tax
                        + value.wage.punish)
                        }
                      </td>
                      <td>{}</td>
                    </tr>
                  ))
                }
              </tbody>
            </table>
          </section>
        </div>
      </div>
    );
  }
}
